<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<style type="text/css">
			.dtop{
				width: 100%;
				background-color: white;
				margin-bottom: 0.4em;
				padding: 0.4em;
			}
			.dbot{
				width: 100%;
				background-color: white;
				padding: 0.4em;
			}
			
			
			.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    text-align: right;
			}
			.place{
				
			}
			.mui-input-row .mui-btn {
			    float: right;
			    width: 65%;
			    padding: 11px 15px;
			}
			
			 input[type=radio]{
        /*去除浏览器默认样式*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /*自定义样式*/
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 1.5em;
		height: 1.5em;
        border: 1px solid #00bfff;
        outline: none;
        cursor: pointer;
        /*设置为圆形，看起来是个单选框*/
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }
 
    /**
    * 单选框 选中之后的样式
    **/
    input[type=radio]:after{
        content: '';
        position: absolute;
        width: 0.5em;
        height: 0.5em;
        display: block;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #00bfff;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
        /*增加一些动画*/
        -webkit-transition : all ease-in-out 300ms;
        -moz-transition : all ease-in-out 300ms;
        transition : all ease-in-out 300ms;
    }
    input[type=radio]:checked:after{
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
input[type=text]{
       text-align: right;
    }
    
    	.radios{
    		width: 60%;
    		height: 40px;
    		display: flex;
    		justify-content: space-around;
    		align-items: center;
    	}


.headerdiv{
			width: 100%;
			padding: 11px;
			text-align: center;
		}
		.headerdiv>img{
			width: 25vw;
			height: calc(25vw);
			border-radius: 50%;
		}
		
		.mui-input-row .mui-switch {
		    float: right;
		    margin-top: 5px;
		    margin-right: 13px;
		}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">添加员工</h1>
		</header>
		<div class="mui-content">
			
			<div class="headerdiv">
				<img id="himg" src="../../images/user-photo.png"/>
				<!--<label for="male">
					<img id="himg" src="img/vipcard.png"/>
				</label>
				<input type="file" hidden="hidden" accept="image/jpg,image/png,image/gif, image/jpeg" name="male" id="male" value="" />
			-->
			</div>
			
		    <div class="dtop">
		    	<div class="mui-input-row border-bot">
		    	    <label>员工编号</label>
		    	    <input id="job_nubmer" type="text" class="textr" placeholder="普通输入框">
		    	</div>
		    	<div class="mui-input-row border-bot">
		    	    <label>姓名</label>
		    	    <input id="username" type="text" class="textr" placeholder="普通输入框">
		    	</div>
		    	<div class="mui-input-row">
	    	        <label>性别</label>
	    	        <div class="radios">
	    	        	<input name="radio" type="radio" value="1" checked>男
	    	        	<input name="radio" type="radio" value="2">女
	    	        </div>
		    	</div>
		    	
		    </div>
		    
		    <div class="dbot">
		    	<div class="mui-input-row border-bot">
		    	    <label>手机号码</label>
		    	    <input id="phone" type="text" class="textr" placeholder="请输入手机号">
		    	</div>
		    	<div class="mui-input-row border-bot">
		    	    <label>员工密码</label>
		    	    <input id="password" type="password" class="textr" placeholder="请输入密码">
		    	</div>
		    	<div class="mui-input-row border-bot">
		    	    <label>基本工资</label>
		    	    <input id="employee_wages" type="number" class="textr" placeholder="请输入基本工资">
		    	</div>
		    	<!--
                	作者：592176224@qq.com
                	时间：2019-02-27
                	描述：
		    	<div class="mui-input-row border-bot">
		    	    <label>部门</label>
		    	    <div class="place items" >
						<button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">部门选择</button>
					</div>
		    	</div>
                -->
		    	<div class="mui-input-row border-bot">
		    	    <label>职位</label>
		    	    <div class="place items" >
						<button id='gender' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">职位选择</button>
					</div>
		    	</div>
		    	
		    	<div class="mui-input-row border-bot">
		    	    <label>门店</label>
		    	    <div class="place items" >
						<button id='mendian' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">门店选择</button>
					</div>
		    	</div>
                
                <div class="mui-input-row border-b">
			        <label class="longtext">是否参与预约</label>
			        <div class="mui-switch mui-switch-blue mui-active" id="round_up">
			            <div class="mui-switch-handle"></div>
			        </div>
			    </div>
                
		    	<div class="mui-input-row">
		    	    <label>入驻日期</label>
		    	     <div class="place items" >
						<button id='time' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">入驻日期</button>
					</div>
		    	</div>
		    	
		    </div>
		    
		     <div class="fgd"></div>
		    <div class="footdiv">
		    	<button id="addemp" type="button" class="mui-btn mui-btn-blue mui-btn-block">保存</button>
		    </div>
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/camera.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var sex = 1,
			role_id=0,
			m_id = 0,		//门店id
			department_id = 0,
			images_id = 0,	//图片id
			is_img = false;	//是否修改图片
			window.onload = function(){
				mui.init();
				
				g("himg").addEventListener('tap', function() {
			     page.imgUp(); 
				}, false);
            page={  
                imgUp:function(){  
                    var m=this;  
                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
                        {title:"拍照"},  
                        {title:"从相册中选择"}  
                    ]}, function(e){//1 是拍照  2 从相册中选择  
                        switch(e.index){  
                            case 1:appendByCamera(function(res){cutimage(res);});break;
                            case 2:appendByGalleryone(function(res){cutimage(res);});break;
                        }  
                    });  
                }  
                //摄像头  
            } 
				window.addEventListener("updateimg", updateimg); //添加自定义事件，其他页面调用
				
				$("input[type=radio]").on("change",function(res){
					console.log(this.value);
					sex = this.value;
				})
				
				
				g("addemp").addEventListener('tap',function(res){
					
					if(role_id==0){
						mui.toast("请选择职位");
						return;
					}
					if(m_id == 0){
						mui.toast("请选择门店");
						return;
					}
					if(g("time").innerText=="入驻日期"){
						mui.toast("请选择入驻时间");
						return;
					}
					var psword = g("password").value;
					if(psword == ""){
						mui.toast("请输入员工密码");
						return;
						return;
					}
					var round_up = g("round_up").classList.contains("mui-active");
					
					var data = {
						url:"/api/employee/add",
						data:{
							access_token:acctoken(),
							job_number:g("job_nubmer").value,
							username:g("username").value,
							sex:sex,
							phone:g("phone").value,
							password:psword,
							employee_wages:g("employee_wages").value,
							role_id:role_id,
							entry_time:g("time").innerText,
							store_id:m_id,
							is_appointment:round_up?1:2,
							//department_id:department_id,
							images_id:images_id,
						}
					}
					//console.log(data);
					
					ajax(data,function(res){
						console.log(res);
						mui.toast(res.msg);
						setTimeout(function(){
							var pPage = plus.webview.currentWebview();
						    var bPage = pPage.opener();
						    bPage.evalJS("onshow();");
							mui.back();
						},300)
					})
				})
				
				
				
				mui.ready(function() {
					
                 var data3 = {
						url:"/api/store/lst",
						data:{
							access_token:acctoken()
						}
				}
                ajax(data3,function(res){
						console.log("门店",res);
						var mlist = [];
						for(var i = 0; i < res.data.length;i++){
							var jsonp = {
								value : res.data[i].id,
								text : res.data[i].store_name,
							}
							mlist.push(jsonp);
						}
						var mendianPicker = new mui.PopPicker();
		                mendianPicker.setData(mlist);
		                var mendian = document.getElementById('mendian');
		                mendian.addEventListener('tap', function(event) {
		                    mendianPicker.show(function(items) {
		                        mendian.innerText = items[0].text;
		                        m_id = items[0].value;
		                    });
		                }, false);
               
					})
                
                var data2 = {
						url:"/api/role/lst",
						data:{
							access_token:acctoken()
						}
				}
                ajax(data2,function(res){
						console.log("职位",res);
						var role = [];
						for(var i = 0; i < res.data.data.length;i++){
							var jsonp = {
								value : res.data.data[i].id,
								text : res.data.data[i].role_name,
							}
							role.push(jsonp);
						}
						var genderPicker = new mui.PopPicker();
		                genderPicker.setData(role);
		                var gender = document.getElementById('gender');
		                gender.addEventListener('tap', function(event) {
		                    genderPicker.show(function(items) {
		                        gender.innerText = items[0].text;
		                        role_id = items[0].value;
		                    });
		                }, false);
               
					})
                
                
                var birthday = document.getElementById('time');
                birthday.addEventListener('tap', function(event) {
                	var birthdayPicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2000, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2099, 12, 31, 0, 0),//设置结束日期    
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    birthdayPicker.show(function(e) {
                    	 birthday.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
         
               
            });
				
			}
			
			
			
			//上传图片
			 function updateimg(e) {
                	var imgurl = e.detail.img;
                	getBase64Image(imgurl,function(res){
                		console.log(res.dataURL);
                		console.log(res.dataURL.length);
                	var data = {
                		url:'/api/upload/image_base64',
                		data:{
                			access_token:acctoken(),
                			images:res.dataURL
                		}
                	}
		                ajax(data,function(resp){
		                	//console.log( hurl +"/uploads/images/"+ res.data.name)
		                	//g("imgid").src = hurl +'/uploads/images/'+ resp.data.name;
		                	g("himg").src = res.dataURL;
		                	images_id = resp.data.images_id;
		                	images_path = resp.data.name;
		                })
                })
                }
             
			//跳转图片裁剪
			function cutimage(path) {
            	console.log(path);
            		var list = {
            			 path: path,
                         //bmtype:300/240,
                         pageid:"addemp",
                         returnfun:"updateimg"
            		}
                    mui.openWindow({
                        url: '../../general/cropper.html',
                        id: 'cropper',
                        extras: list,
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 800
                        },
                        waiting: {
                            autoShow: true
                        }
                    });
                }
			
		</script>
	</body>

</html>